<template>
  <div>
    <div class="wrapper" >
      <div class="formdata">
        <van-cell-group>
          <van-field class="textinput" type="text" clearable v-model="formdata.buyerName" placeholder="请输入联系人姓名" />
          <van-field class="textinput" type="number" clearable v-model="formdata.buyerMobile" placeholder="请输入联系人手机号" />
          <van-field class="textinput" type="number" clearable v-model="formdata.orderMoneyTemp" placeholder="成交金额(万)" />

          <van-field
            class="textinput"
            readonly
            clickable
            right-icon="arrow-down"
            :value="formdata.visitTime"
            placeholder="成交时间"
            @click="showPicker2 = true"
          />
          <van-popup v-model="showPicker2" position="bottom">
            <van-datetime-picker
              v-model="nowTime"
              type="datetime"
              @cancel="showPicker2 = false"
              @confirm="onDateConfirm"
            />
          </van-popup>
          <van-field class="textinput" type="textarea" clearable v-model="formdata.remark" placeholder="请输入备注内容" />
        </van-cell-group>
      </div>
      <div class="m_button" @click="submit">
        <div class="c_button">
          提交成功订单
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mineApi } from '@/api'
import { parseTime } from '@/utils'
export default {
  components: {
  },
  async created() {
  },
  data() {
    return {
      showPicker: false,
      showPicker2: false,
      nowTime: new Date(),
      formdata: {
        username: '',
        mobile: '',
        remark: '',
        buyerSex: '',
        sexValue: '',
        visitTime: ''
      }
    }
  },
  methods: {
    onConfirm(value) {
      this.formdata.sexValue = value
      this.formdata.buyerSex = this.getSexValue(value)
      this.showPicker = false
    },
    onDateConfirm(value) {
      console.log('value', value)
      this.formdata.visitTime = parseTime(value)
      this.showPicker2 = false
    },
    getSexValue(code) {
      let sexcode = 0
      switch (code) {
        case '男':
          sexcode = 1
          break
        case '女':
          sexcode = 2
          break
        default:
          break
      }
      return sexcode
    },
    async submit() {
      if (!this.formdata.buyerName) {
        this.$toast('请输入联系人姓名')
        return
      }
      if (!this.formdata.buyerMobile) {
        this.$toast('请输入联系电话')
        return
      }
      this.formdata.orderMoney = this.formdata.orderMoneyTemp * 10000
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '申请中'
      })
      const res = await mineApi.addOrder({
        houseId: this.$route.query.id,
        ...this.formdata
      }).catch(err => {
        console.log('err', err)
        this.$toast('服务器出错')
      })
      if (res.code !== 200) {
        return
      }
      this.$toast.clear()
      this.$toast('提交成功')
      this.$router.back()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .wrapper {
    .formdata{
      padding: 20px;
      background-color: #fff;
    }
    .textinput{
      border-radius: 10px;
      margin: 20px 0;
      line-height: 16px;
      background-color: #f0f0f0;
    }
  }
</style>
